JS - language picker - 02

            <div class="title">example 1 - quotes</div><br>
            <div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
            <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
            <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
            <div>I live in Italy.<span lang="it">Ciao bella!</span></div>
            <div><q>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
             eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</q></div>    
            <div>This is <em>English</em>, but <span lang="ja">これは<em>日本語</em>です。</span></div>
        

            <p>It is polite to welcome people in their own language:</p>
            <ul>
                <li lang="zh-Hans">欢迎</li>
                <li lang="zh-Hant">歡迎</li>
                <li lang="el">Καλοσωρίσατε</li>
                <li lang="ar">اهلا وسهلا</li>
                <li lang="ru">Добро пожаловать</li>
                <li lang="din">Kudual</li>
            </ul>
            <p>It is polite to welcome people in their own language:</p>
                <ul>
                    <li class="zhs" lang="zh-Hans">欢迎</li>
                    <li class="zht" lang="zh-Hant">歡迎</li>
                    <li class="el" lang="el">Καλοσωρίσατε</li>
                    <li class="ar" lang="ar">اهلا وسهلا</li>
                    <li class="ru" lang="ru">Добро пожаловать</li>
                    <li class="din" lang="din">Kudual</li>
                </ul>
        

            <form>
                <input type="radio" name="language" value="English">English<br>
                <input type="radio" name="language" value="Dutch">Dutch<br>
                <input type="radio" name="language" value="French">French<br>
                <input type="radio" name="language" value="German">German<br>
                <input type="radio" name="language" value="Japanese">Japanese<br>
                <input type="button" id="btn" value="Selected language"><br>
                <p id="selection"></p>
            </form>
            <script>
                const btn = document.querySelector('#btn');
                btn.onclick = function () {
                    const rbs = document.querySelectorAll('input[name="language"]');
                    let selectedValue;
                    for (const rb of rbs) {
                        if (rb.checked) {
                            selectedValue = rb.value;
                            break;
                        }
                    }
                    document.getElementById('selection').innerHTML = "The selected language is " + selectedValue;
                };
            </script>
        

            <p>retrieve the language radio button selected value using JavaScript</p>
            <p>Select the language:<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="English">English<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="Dutch">Dutch<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="Chinese">Chinese<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="Japanese">Japanese<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="French">French<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="German">German<br>
                <input type="radio" name="taal" onclick="myFunction(this)" value="Korean">Korean<br>
            </p>
            <script>
                function myFunction(taal) {
                alert(taal.value);
                }
            </script>